<template>
	<view class="gy-menu" :class="{card: props.isCard, radius: props.showRadius && props.isCard}">
		<com-grid v-if="props.mode === 'grid'" :border="props.border" :cols="props.cols">
			<com-grid-item v-for="(item, index) in props.list" :key="index" :data="item" @select="selectFn(item)">
				<!-- <view v-if="item.icon.indexOf('/') !== -1">
					<com-icon :size="item.iconSize" :name="item.icon" />
				</view> -->
				<!-- <view
                    v-else
                    class="gy-menu-grid-icon hexagonal"
                    :style="{width: item.iconBgSize + 'rpx', height: item.iconBgSize + 'rpx', backgroundColor: item.iconBgColor || '#999999'}" >
					<com-icon :size="item.iconSize" :name="item.icon" :color="item.iconColor || '#333333'" />
				</view> -->
                <com-badge :value="item.number || 0">
                    <view v-if="item.icon && item.icon.startsWith('gy_icon_')" class="gy-menu-grid-icon" :style="{backgroundColor: item.iconBgColor }">
                        <com-icon :size="item.iconSize || 32" :color="item.iconColor || '#2E344A'" :name="item.icon" />
                    </view>
					<view v-else class="gy-menu-grid-icon" :style="{width: (item.iconSize || 32) + 'rpx', height: (item.iconSize || 32) + 'rpx'}">
					    <com-image mode="" :width="item.iconSize || 32" :height="item.iconSize || 32" :src="item.icon" />
					</view>
                </com-badge>
				<view v-if="item.label" class="gy-menu-grid-label">{{ item.label }}</view>
				<view v-if="item.subLabel" class="gy-menu-grid-sub-label">{{ item.subLabel }}</view>
			</com-grid-item>
		</com-grid>
		<view v-if="props.mode === 'list'" class="gy-menu-list">
			<view v-for="(item,index) in props.list" :key="index">
				<view v-if="!item.openType || item.openType === 'custom'" class="gy-menu-list-item" @click="selectFn(item)">
					<com-icon v-if="item.icon" :size="36" :name="item.icon" :color="item.iconColor || '#2E344A'" style="margin-right: 10rpx;" />
					<view class="gy-menu-list-item-name">{{ item.label }}</view>
					<com-icon :size="30" color="#2E344A" name="gy_icon_arrowRight" />
				</view>
				<button v-else class="gy-menu-list-item" :open-type="item.openType">
					<com-icon v-if="item.icon" :size="36" :name="item.icon" :color="item.iconColor || '#2E344A'" style="margin-right: 10rpx;" />
					<view class="gy-menu-list-item-name">{{ item.label }}</view>
					<com-icon :size="30" color="#2E344A" name="gy_icon_arrowRight" />
				</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>

    const emits = defineEmits(["select"]);
    const props = defineProps({
    	mode: {
    		type: String,
    		default: "grid"
    	},
    	list: {
    		type: Array,
    		default: () => []
    	},
    	isCard: {
    		type: Boolean,
    		default: false
    	},
    	showRadius: {
    		type: Boolean,
    		default: false
    	},
    	showPadding: {
    		type: Boolean,
    		default: true
    	},
    	border: {
    		type: Boolean,
    		default: true
    	},
    	cols:{
    		type: Number,
    		default: 3
    	}
    });

    function selectFn(item: any){
    	emits('select', item);
    }

</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>
	.gy-menu{
	    background-color: #fff;
	    overflow: hidden;
		:deep(.gy-badge){
			.gy-badge-number{
				top: 0 !important;
			}
		}
	    .gy-menu-grid-icon{
	        @include flex-center-center;
	        min-width: 50rpx;
	        min-height: 50rpx;
	        padding: 10rpx;
	        border-radius: var(--gy-border-radius-large);
	    }
	    .hexagonal{
	        -webkit-clip-path: polygon(40% 7.67949%, 43.1596% 6.20615%, 46.52704% 5.30384%, 50% 5%, 53.47296% 5.30384%, 56.8404% 6.20615%, 60% 7.67949%, 81.65064% 20.17949%, 84.50639% 22.17911%, 86.97152% 24.64425%, 88.97114% 27.5%, 90.44449% 30.6596%, 91.34679% 34.02704%, 91.65064% 37.5%, 91.65064% 62.5%, 91.34679% 65.97296%, 90.44449% 69.3404%, 88.97114% 72.5%, 86.97152% 75.35575%, 84.50639% 77.82089%, 81.65064% 79.82051%, 60% 92.32051%, 56.8404% 93.79385%, 53.47296% 94.69616%, 50% 95%, 46.52704% 94.69616%, 43.1596% 93.79385%, 40% 92.32051%, 18.34936% 79.82051%, 15.49361% 77.82089%, 13.02848% 75.35575%, 11.02886% 72.5%, 9.55551% 69.3404%, 8.65321% 65.97296%, 8.34936% 62.5%, 8.34936% 37.5%, 8.65321% 34.02704%, 9.55551% 30.6596%, 11.02886% 27.5%, 13.02848% 24.64425%, 15.49361% 22.17911%, 18.34936% 20.17949%);
	    }
	    .gy-menu-grid-label{
	        width: 100%;
	        @include text-ellipsis(1);
	        font-size: var(--gy-font-size-base);
	        padding: 0 10rpx;
	        text-align: center;
	        margin-top: 10rpx;
	    }
		.gy-menu-grid-sub-label{
			margin-top: 5rpx;
			font-size: var(--gy-font-size-small);
			color: var(--gy-text-color-secondary);
		}
		button::after {
			border: none;
		}
		.gy-menu-list{
			view{
				border-bottom: 1rpx solid var(--gy-border-color);
				.gy-menu-list-item{
				    height: 100rpx;
				    @include flex-between-center;
				    padding: 0 var(--gy-gap);
				    color: #666666;
					outline: none;
					border: none;
					border-radius: 0;
					background-color: transparent;
				    .gy-menu-list-item-name{
				        flex: 1;
				        color: #333333;
				        font-size: var(--gy-font-size-medium);
				        width: calc(100% - 80rpx);
				        @include text-ellipsis(1);
				        padding-right: 20rpx;
						text-align: left;
						border: none !important;
				    }
				}
				.gy-menu-list-item:active{
				    background-color: #f7f7f7;
				}
			}
			view:only-child:last-child{
				border: none;
			}
		}
	}
	.gy-menu.card{
	    margin: var(--gy-gap);
	}
	.gy-menu.radius{
	    border-radius: var(--gy-border-radius-large);
	}

</style>
